<template>
	<div class="order">
		<h3>
			<label>全部订单</label>
			<button @click="reg=1">全部</button>
			<button @click="reg=2">待付款</button>
			<button @click="reg=3">已付款</button>
			<button @click="reg=4">待评价</button>
			<button @click="reg=5">退款/售后</button>
		</h3>
		<Order1 v-if="reg==1"></Order1>
		<Order2 v-if="reg==2"></Order2>
		<Order3 v-if="reg==3"></Order3>
		<Order4 v-if="reg==4"></Order4>
		<Order5 v-if="reg==5"></Order5>
		
		<Buttom :propurl="arrUrl"></Buttom>
	</div>
</template>

<script>
	import Cookie from 'js-cookie'
	
	import Order1 from './pare/Order1'
	import Order2 from './pare/Order2'
	import Order3 from './pare/Order3'
	import Order4 from './pare/Order4'
	import Order5 from './pare/Order5'
	
	import Buttom from '../default/Buttom'
	export default{
		name:'Order',
		components:{
			Order1,Order2,Order3,Order4,Order5,
			Buttom
		},
		data(){
			return{
				arrUrl:['img/o-home.png','img/order.png','img/o-user.png'],
				reg:1
			}
		},
		mounted() {
			if (!Cookie.get('name')) {
				this.$router.push('/login')
			}
		}
	}
</script>

<style scoped>
	.order{
		width: 100%;
	}
	.order h3{
		text-align: center;
		padding-top: 0.3rem;
		width: 100%;
		background: #edeff2;
		padding-bottom: 0.5rem;
	}
	.order h3 label{
		font-size: 0.5rem;
		font-weight: bold;
		display: block;
		padding-bottom: 0.5rem;
	}
	.order h3 button{
		color: #808080;
		border: none;
		width: 2rem;
		line-height: 0.6rem;
		border-radius: 0.5rem;
	}
</style>
